<template> 
  <el-card class="form-container" shadow="never">
    <el-form :model="homeAdvertise"
             :rules="rules"
             ref="homeAdvertiseFrom"
             label-width="150px"
             size="small" class="demo-ruleForm">
      <el-form-item label="楼盘名：" prop="name">
        <el-input v-model="homeAdvertise.name" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="封面图：">
        <single-upload v-model="homeAdvertise.cover"></single-upload>
      </el-form-item>
      <el-form-item label="鸟瞰图:">
        <multi-upload v-model="selectProductPics"></multi-upload>
      </el-form-item>

      <!-- <el-form-item label="VR/短视频：">
        <el-select v-model="videoType">
          <el-option
            v-for="type in typeOptions"
            :key="type.value"
            :label="type.label"
            :value="type.value">
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="VR链接：">
        <el-input v-model="homeAdvertise.vrUrl" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="VR封面图：" >
        <single-upload v-model="homeAdvertise.vrCover"></single-upload>
      </el-form-item>
      <el-form-item label="短视频链接：">
        <video-upload v-model="homeAdvertise.video"></video-upload>
      </el-form-item>
      <el-form-item label="短视频封面图：" >
        <single-upload v-model="homeAdvertise.videoCover"></single-upload>
      </el-form-item>
      <el-form-item label="地点：" >
        <el-cascader
          size="large"
          :options="sendaddresss"
          v-model="sendOptions"
          @change="handleChanges">
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
        <!-- <el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import SingleUpload from '@/components/Upload/singleUpload'
  import VideoUpload from '@/components/Upload/videoUpload'
  import MultiUpload from '@/components/Upload/multiUpload'
  import {addfloor, getfloor, updafloor} from '@/api/homeAdvertise'
  import {regionData, CodeToText, TextToCode} from 'element-china-area-data'
  const defaultTypeOptions = [
    {
      label: 'VR',
      value: 0
    },
    {
      label: '短视频',
      value: 1
    }
  ];
  const defaultHomeAdvertise = {
    name:'',  
    cover: "",
    video: "",
    videoCover: "",
    vrCover: "",
    vrUrl: "",
    province: "",
    city: "",
    county: "",
    loupanImgList:[]
  };
  export default {
    name: 'HomeAdvertiseDetail',
    components:{SingleUpload, MultiUpload,VideoUpload},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        homeAdvertise: {
          name:'',  
          cover: "",
          video: "",
          videoCover: "",
          vrCover: "",
          vrUrl: "",
          province: "",
          city: "",
          county: "",
          loupanImgList:[]
        },
        videoType: 1,
        rules: {
          name: [
            {required: true, message: '请输入内容', trigger: 'blur'}
          ]
        },
        typeOptions: Object.assign({}, defaultTypeOptions),
        sendaddresss: regionData,
        CodeToText,
        TextToCode,
        sendareas: '',//详细地址
      	sendOptions: [],
      	sendreturnprovince:'',
      	sendreturncity:'',
      	sendreturnregion:'',
      }
    },
    computed: {
    //商品的主图和画册图片
      selectProductPics:{
        get:function () {
          console.log(this.homeAdvertise.loupanImgList)
          let pics=[];
          for(let i=0;i<this.homeAdvertise.loupanImgList.length;i++){
            pics.push(this.homeAdvertise.loupanImgList[i].imgUrl);
          }
          return pics;
        },
        set:function (newValue) {
          if (newValue == null || newValue.length === 0) {
                this.homeAdvertise.loupanImgList = {
                  imgUrl:newValue
                }
          } else {
            console.log(newValue)
            this.homeAdvertise.loupanImgList = [];
            for (let i = 0; i < newValue.length; i++) {
                this.homeAdvertise.loupanImgList.push({
                    imgUrl:newValue[i]
                  })
              }
          }
        }
      }
    },
    created(){
      if (this.isEdit) {
        getfloor(this.$route.query.id).then(response => {
          this.sendOptions = ['', '', '']
          if(response.data.province != ''){
            this.sendOptions[0] = (this.TextToCode[response.data.province].code.toString())
            this.sendOptions[1] = (this.TextToCode[response.data.province][response.data.city].code)
            this.sendOptions[2] = (this.TextToCode[response.data.province][response.data.city][response.data.county].code)
          }
          this.homeAdvertise = response.data;
        });
      }else{
        this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
      }
    },
    mounted(){
      
    },
    methods: {
      //通过下拉列表选择获取省市区
      handleChanges(value) {
          console.log(value)
          console.log(this.sendOptions)
          this.sendreturnprovince = CodeToText[this.sendOptions[0]]
          if (CodeToText[this.sendOptions[1]] == '市辖区') {
              this.sendreturncity = this.sendreturnprovince
          } else {
              this.sendreturncity = CodeToText[this.sendOptions[1]]
          }
          this.sendreturnregion = CodeToText[this.sendOptions[2]] 
          
          this.homeAdvertise.province = CodeToText[this.sendOptions[0]]
          this.homeAdvertise.city = CodeToText[this.sendOptions[1]]
          this.homeAdvertise.county =  CodeToText[this.sendOptions[2]]
      },
      //通过省市区获取对应编码
      // convertTextToCode(provinceText, cityText, regionText) {
      //     let code = ''
      //     if (provinceText && this.TextToCode[provinceText]) {
      //         const province = this.TextToCode[provinceText]
      //         code += province.code + ', '
      //       if (cityText && province[cityText]) {
      //           const city = province[cityText]
      //           code += city.code + ', '
      //           if (regionText && city[regionText]) {
      //                 code += city[regionText].code
      //           }
      //       }
      //     }
      //     return code
      // },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否提交数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.isEdit) {
                updafloor(this.homeAdvertise).then(response => {
                  this.$refs[formName].resetFields();
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration:1000
                  });
                  this.$router.back();
                });
              } else {
                addfloor(this.homeAdvertise).then(response => {
                  this.$refs[formName].resetFields();
                  this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
                  this.$message({
                    message: '提交成功',
                    type: 'success',
                    duration:1000
                  });
                  this.$router.back();
                });
              }
            });

          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      // resetForm(formName) {
      //   this.$refs[formName].resetFields();
      //   this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
      // }
    }
  }
</script>
<style scoped>
  .input-width {
    width: 70%;
  }
</style>


